<template>
  <div>
    <a-tabs
      v-if="areaList && areaList.length > 0"
      default-active-key="1"
      :active-key="activeKey"
      :tab-bar-style="{height: '900px'}"
      tabPosition="left"
      @change="tabClickPane">
      <a-tab-pane v-for="(d,index) in areaList" :key="index + 1" :tab="d.areaName">
        <view-area-pane
          ref="viewAreaPane"
          :areaForm="d"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { getCaseCity } from '@/api/instance/caseCity'
import ViewAreaPane from './ViewAreaPane'

export default {
  name: 'ViewArea',
  props: {
    caseId: {
      type: Number,
      required: true
    }
  },
  components: {
    ViewAreaPane
  },
  data () {
    return {
      // 选中面板
      activeKey: 1,
      // 加载状态
      loading: false,
      // 交通统计数据
      timeContrastEcharts: null,
      // 交通数据
      timeContrastData: [],
      // 区域列表
      areaList: [],
      // 表单参数
      form: {
        areaId: undefined,
        parentId: undefined,
        userId: undefined,
        deptId: undefined,
        areaName: undefined,
        populationSize: undefined,
        newHomePrices: undefined,
        oldHomePrices: undefined,
        populationSizeRate: undefined,
        newHomePricesRate: undefined,
        oldHomePricesRate: undefined,
        subway: undefined,
        bus: undefined,
        trainTime: undefined,
        subwayTime: undefined,
        busTime: undefined,
        arrivalTime: undefined,
        residentsNumber: undefined,
        officeNumber: undefined,
        hotelNumber: undefined,
        restaurantNumber: undefined,
        shoppingNumber: undefined,
        trafficNumber: undefined,
        eduNumber: undefined,
        leisureNumber: undefined,
        tourismNumber: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remark: undefined
      }
    }
  },
  filters: {},
  created () {
    this.caseCity()
  },
  mounted () {

  },
  watch: {

  },
  methods: {
    /** 案例城市 */
    caseCity () {
      this.loading = true
      getCaseCity(this.caseId).then(response => {
        if (response.data.areas) {
          this.areaList = response.data.areas
        }
        // 关闭加载状态
        this.loading = false
      })
    },
    /** 商圈面板切换 */
    tabClickPane (key) {
      this.activeKey = key
    }
  }
}
</script>

<style scoped>

</style>
